@import url(./base.less);

@rootSize:37.5rem;
body {
  position: relative;
  padding: 0 (15 / @rootSize);
}
.color {
  color: #cdcdcd;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: (46 / @rootSize);
  width: 100%;
  background-color:#fff;
  z-index: 999;
  padding: 0 (15 / @rootSize);
  span {
    font-size: (15 / @rootSize);
  
  }
  .search {
    display: flex;
    align-items: center;
    width: (250 / @rootSize);
    height: (32 / @rootSize) ;
    background-color: #f7f7f7;
    border-radius: (16 / @rootSize);
    padding-left:(16 / @rootSize);
    line-height: (32 / @rootSize);

    img {
      display: block;
      width: (12 / @rootSize);
      height: (12 / @rootSize);
       margin-right: (16 / @rootSize);
    }
    span {
      color: #b7b7b7;
      font-size: (12 / @rootSize);
    }
    

  }
  .adress {
    margin-right: (25 / @rootSize);
    img {
      display: block;
  width:(15 / @rootSize) ;
  height:(15 / @rootSize) ;


    }
  }


}



// 内容区域
.main {
  padding:(47 / @rootSize) 0 (53 / @rootSize) ;
.banner {
  height: (130 / @rootSize);
  width: 100%;
  background-image: url(../imgs/banner.png);
  background-size: cover;

}
.change {
  margin-top: ((8 / @rootSize));
  margin-bottom: (12 / @rootSize);
  ul {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    li {
      width: (8 / @rootSize);
      height: (3 / @rootSize);
      background-color: #303030;
      border-radius: (1.5 / @rootSize);
      margin-right:(8 / @rootSize) ;
      &:nth-child(n+2) {
        background-color: #dedede;
      }
    }
  }
}

.nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: (36 / @rootSize);
  .left,
  .right {
    height: (70 / @rootSize);
    width: (169 / @rootSize) ;
  }

}

.goods1 {
  margin-bottom: (30 / @rootSize);
  .title1 {
    height: (36 / @rootSize);
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: (20 / @rootSize);
    }
    .more {
      width: (8 / @rootSize);
      height: (12 / @rootSize);

    }
    
  }
 .pic {
  display: flex;
  justify-content: space-between;
  .left {
    img {
      width: (169 / @rootSize);
    }
    .text {
    h4 {
      font-size: (13 / @rootSize);
      margin: (8 / @rootSize) 0;
    }
    p {
      font-size: (11 / @rootSize);
      color: #999;
    }
    span {
      font-size: (11 / @rootSize);
      color: #f49d0c;
    }
    }
  }
 }
}

.ggwei {
  height: (56 / @rootSize);
  margin-bottom: (36 / @rootSize);
  margin-top: (30 / @rootSize);
  img {
    width: 100%;
  }
}


.title2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: (24 / @rootSize);
  h3 {
    font-size: (16 / @rootSize);
  }
  .right {
    span {
      position: relative;
      font-size: (14 / @rootSize);
      color: #999;
    }
   .action {
    position: absolute;
    left: (8 / @rootSize);
    bottom: (-3 / @rootSize);
    display: block;
    width: (10 / @rootSize);
    height: (4 / @rootSize);
    background-color: #10a0ed;
    border-radius: (2 / @rootSize);
   }

  }

}


.goods {
  ul {
    li {
      display: flex;
      margin-bottom: (18 / @rootSize);

      .pic {
        margin-right: (16 / @rootSize);
        img {
          width: (110 / @rootSize);
          height: (80 / @rootSize);
        }
      }
      .text {
        h4 {
          font-size: (14 / @rootSize);
          color: #101010;
        }
        p {
          margin-top: (8 / @rootSize) ;
          font-size: (11 / @rootSize);
          color: #9d9d9d;

        }
        a {
          display: inline-block;
          width: (45 / @rootSize);
          height: (14 / @rootSize);
          border: (1 / @rootSize) solid #cfcfcf;
          border-radius: (3 / @rootSize);
          font-size: (12 / @rootSize);
          color: #9d9d9d;
          text-align: center;
          margin-right: (10 / @rootSize);
        }

        .price {
          color: #f49e0d;
          span {
            font-size: (14 / @rootSize);
          }
          i {
            font-size: (10 / @rootSize);
            font-style: normal;
          }
        }
      }
    }
  }
}


.more-goods {

  margin: 0 auto;
width: (260 / @rootSize);
height: (38 / @rootSize);
background-color: #f2f2f3;
text-align: center;
border-radius: (19 / @rootSize);
margin-bottom: (24 / @rootSize);
a {
  color: #999;
  font-size: (12 / @rootSize);
  line-height:(38 / @rootSize) ;
}
}


}




// 底部区域
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: (50 / @rootSize);
  width: 100%;
  background-color: #fff;
  z-index: 999;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      height: (50 / @rootSize);
     padding: (8 / @rootSize) 0 (7 / @rootSize) 0;
      img {
        width: (20 / @rootSize);
        height: (20 / @rootSize);
        margin: 0 auto;
        margin-bottom: (8 / @rootSize);
      }
    p {
        font-size: (12 / @rootSize);
        margin-bottom: (5 / @rootSize);

      }

    }
  }


}